<script setup lang="tsx">
import { computed, ref } from "vue"
import { 总, 表, 注, 取, 查 } from './data'

const query = ref('')
const res = computed(() => {
  const q = query.value
  if (q == '') return 总
  if (!isNaN(Number(q))) return 取(Number(q))
  return 查(q)
})

const e注 = ({ c }: { c: string }) =>
  注[c] == null ? c : <u title={注[c]}>{c}</u>
const e反 = ({ c, 原 }: { c: string, 原: string }) => {
  const { 自, 繁, 异 } = 表.get(c)!
  if (自.length + 繁.length + 异.length <= 1) return null
  const 繁s = 繁.map(字 => 字.c == 原 ? '' : 字.c).join('')
  const 异s = 异.map(字 => 字.c == 原 ? '' : 字.c).join('')
  return <small>{
    (自.length > 0 ? '～' : '') +
    (繁s != '' ? '(' + 繁s + ')' : '') +
    (异s != '' ? '[' + 异s + ']' : '')
  }</small>
}
</script>

<template>
  输入文本或序号：<input type="text" v-model="query" placeholder="留空则显示全部">
  <div class="ctn">
    <div v-for="{ c, 号, 画, 级, 共, 第, 繁, 异 } in res" class="entry">
      <div class="attr">
        {{ 号 }}.{{ 共 == 1 ? '' : '¹²³⁴⁵'[第] + '⁄' + '₀₁₂₃₄₅'[共] }}
        {{ '一二三'[级] }}级 {{ 画 }}画
      </div>
      <div class="zi">
        <e注 :c />
      </div>
      <div class="vari">
        <template v-if="繁 == ''">～</template>
        <template v-else>
          <e注 :c="繁" />
          <e反 :c="繁" :原="c" />
        </template>
        <br>
        <template v-for="c异 in 异">
          <e注 :c="c异" />
          <e反 :c="c异" :原="c" />
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.ctn {
  display: grid;
  grid-template-columns: repeat(auto-fill, 11rem);
  justify-content: space-around;
}

.entry {
  line-height: 1.3;
  font-size: 1rem;
  position: relative;
  width: 11rem;
  height: 6rem;
  contain: strict;
  content-visibility: auto;
}

.attr {
  position: absolute;
  left: 1rem;
  top: 1rem;
}

.zi {
  font-size: 2rem;
  position: absolute;
  left: 1rem;
  top: 2.3rem;
}

.vari {
  position: absolute;
  left: 3.5rem;
  top: 2.5rem;
}
</style>
